<template>
  <u-popup v-model="show" mode="bottom" :mask="false" @close="bindClose()" v-if="show">

    <div class="scroll-body">
      <scroll-view scroll-y="true" style="height: 300rpx">
        <view v-if="bgColorShow" class="font-body" style="display: flex">
<!--          v-model:color="bgColor"-->
          <ColorSlider  style="width: 100%; margin: 20rpx" @change="change">
            <div
              class="now-color-box"
              :style="{
                backgroundColor: bgColor,
              }"
            ></div>
          </ColorSlider>
        </view>
      </scroll-view>
    </div>
  </u-popup>
</template>
<script setup lang="ts">
import { ref, } from 'vue';
import { ColorSlider } from '@/components/color-slider/color-slider.vue';
import { Debounce } from '@/utils/tool';

const emit = defineEmits(['colorChange']);

const bgColor = ref('rgba(242, 90, 39, 1)');
const change = (e: string) => {
  console.log('color change', e);
  bgColor.value= e;
};

const submit = Debounce(() => {
  emit('colorChange', wordOption);
}, 100);

const bgColorShow = ref(false);
const show = ref(false);
const open = (color: any) => {
  show.value = true;
  if (color) {
    bgColor.value = color;
  }
  setTimeout(() => {
    bgColorShow.value = true;
  },100)
};

defineExpose({
  open,
});

const bindClose = () => {
  show.value = false;
  bgColor.value = '';
  bgColorShow.value = false;
};
</script>

<style scoped lang="scss">
.title {
  font-weight: bold;
  font-size: 32rpx;
  color: #222222;
  line-height: 42rpx;
  text-align: center;
  padding: 32rpx 0;
}

.input {
  font-weight: bold;
  font-size: 28rpx;
  color: #666666;
  line-height: 38rpx;
  text-align: left;
  //padding: 0 0 24rpx;
  margin: 0 32rpx;
  border-bottom: 1rpx solid #e4e4e4;
}

.btns {
  display: flex;
  align-items: center;
  gap: 14rpx;
  padding: 32rpx 32rpx 0;
  .btn {
    width: 104rpx;
    height: 48rpx;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    font-weight: 400;
    font-size: 28rpx;
    line-height: 48rpx;
    text-align: center;
    background: #f3f7f8;
    color: #6f6f6f;
    &.active {
      color: #ffffff;
      background: #f25a27;
    }
  }
}

.scroll-body {
  padding: 32rpx;
}
.font-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16rpx;

  .font-li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 330rpx;
    height: 80rpx;
    background: #f3f7f8;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    border: 2rpx solid transparent;
    padding: 0 24rpx;
    gap: 20rpx;
    &.active {
      border: 2rpx solid #f25a27;
    }
    .font-name {
      font-weight: 400;
      font-size: 28rpx;
      color: #222222;
    }
    image {
      width: 32rpx;
      height: 28rpx;
    }
  }
}

.style-li {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 40rpx 0;
  padding: 40rpx 0;
  .style-item {
    width: 56rpx;
    height: 56rpx;
    border-radius: 50%;
    text-align: center;
    line-height: 56rpx;
    &.active {
      background: #f3f7f8;
    }
  }
  .iconfont {
    font-size: 28rpx;
    color: #222222;
  }
}

.now-color-box {
  width: 102rpx;
  height: 102rpx;
  border-radius: 50%;
}
</style>
